<template>
<view class="content">
    <view v-if="loading">
			<view class="tips-box"></view>
			<view class="info-box">
				<view class="info-block">
					<view class="tips-content">卦象</view>
					<view class="time-info">
							<view class="section">
								<view class="section-title">公历：</view>
								<view class="section-content">{{gonli}}</view>
							</view>
							<view class="section">
								<view class="section-title">农历：</view>
								<view class="section-content">{{nongli}}</view>
							</view>
							<view class="section">
								<view class="section-title">四值：</view>
								<view class="section-content">
									<text class="mod-text">
										<template v-for="(item, index) in sizhuArray">
											<text class="text" v-if="index<4" :key="index">{{item}}</text>
										</template>
									</text>
									<text class="text">{{sizhuArray[4]}}</text>
								</view>
							</view>
					</view>
					<view class="info">
							<view @click="goToPage" class="info-1" :data-postid="zhugua_img_data">
									<view class="nickname-btn-top-zhugua">[本卦]</view>
									<image class="userinfo-avatar" :src="'../../../static/images/meihua/detail/'+zhugua_img+'.png'"></image>
									<view class="nickname-btn-zhugua">{{zhugua_text}}</view>
							</view>
							<view @click="goToPage" class="info-1" :data-postid="hugua_img">
									<view class="nickname-btn-top">[互卦]</view>
									<image class="userinfo-avatar" :src="'../../../static/images/meihua/detail/'+hugua_img+'.png'"></image>
									<view class="nickname-btn">{{hugua_text}}</view>
							</view>
							<view @click="goToPage" class="info-1" :data-postid="biangua_img">
									<view class="nickname-btn-top">[变卦]</view>
									<image class="userinfo-avatar" :src="'../../../static/images/meihua/detail/'+biangua_img+'.png'"></image>
									<view class="nickname-btn">{{biangua_text}}</view>
							</view>
					</view>
					<view class="index-bd">
							<view class="kind-list">
									<view @click="goToPage" class="kind-list-item" :data-postid="zhugua_img_data">
											<view class="kind-list-item-hd">
													<view class="kind-list-text">{{zhugua_text}}</view>
													<img class="kind-list-img" src="../../../static/images/gua/arrow_l.png" />
											</view>
									</view>
									<view @click="goToPage" class="kind-list-item" :data-postid="hugua_img">
											<view class="kind-list-item-hd">
													<view class="kind-list-text">{{hugua_text}}</view>
													<img class="kind-list-img" src="../../../static/images/gua/arrow_l.png" />
											</view>
									</view>
									<view @click="goToPage" class="kind-list-item" :data-postid="biangua_img">
											<view class="kind-list-item-hd">
													<view class="kind-list-text">{{biangua_text}}</view>
													<img class="kind-list-img" src="../../../static/images/gua/arrow_l.png" />
											</view>
									</view>
							</view>
					</view>
				</view>
			</view>
      <activity-box :positionId="306"></activity-box>
      <yipu-logo></yipu-logo>
		</view>
</view>
</template>

<script>
var t = require("@/utils/interopRequireDefault")(require("@/utils/meihua/getDateFn.js"));
var a = new (require("@/utils/meihua/calendarConverterFn.js").CalendarConverter)();
var e = (new (require("@/utils/meihua/listsFn.js").Lists)(), new (require("@/utils/meihua/siZhuInfo.js").SiZhuInfo)());
export default {
  data() {
    return {
      loading: false,
      zhugua_img: "qianqian",
      zhugua_img_data: "qianqian",
      hugua_img: "qianqian",
      biangua_img: "qianqian",
      zhugua_text: "乾为天",
      hugua_text: "乾为天",
      biangua_text: "乾为天",
      type: 1,
      sc: 1,
      number1: 1,
      number2: 1,
      gonli: "2018年08月08日 08:08:08",
      nongli: "甲子年八月初八日子时",
      sizhu: "甲子 甲子 甲子 甲子",
      s: 6,
      x: 3,
      d: 4,
      uuid: "",
      showView: !0,
      pathInfo: {},
      sizhuArray: []
    }
  },
  methods: {
    goToPage: function(t) {
        var a = t.currentTarget.dataset.postid;
        var e = {
            guapath: a
        }, i = "/pages/meihua/about/explain/explain?info=" + JSON.stringify(e);
        uni.navigateTo({
            url: i
        });
    },
    onLoad: function(u) {
        uni.showLoading({
            title: '加载中',
        })
        setTimeout(() => {
            uni.hideLoading()
            this.loading = true
        }, 1500)
        var n = (0, t.default)(new Date(), "Y");
        var s = (0, t.default)(new Date(), "M");
        var g = (0, t.default)(new Date(), "D");
        var r = Math.floor((new Date().getHours() + 1) % 24 / 2) + 1;
        var o = "子丑寅卯辰巳午未申酉戌亥"[r - 1];
        var h = new Date(n, s - 1, g);
        var l = a.solar2lunar(h);
        var d = e.getSiZhu(l.cDay, r) + o;
        var c = e.getKongWang(l.cDay);
        var f = (0, t.default)(new Date(), "Y年M月D日 h:m");
        var p = l.cYear + "年" + l.lunarMonth + "月" + l.lunarDay + "日" + o + "时";
        var m = l.cYear + " " + l.cMonth + " " + l.cDay + " " + d + " (" + c + "空)";
        var y = JSON.parse(unescape(decodeURI(u.info)));
        var w = null == y.sizhu ? m : y.sizhu;
        w = e.getSiZhuQufen(w);

        this.pathInfo = y;
        this.s = y.sg;
        this.x = y.xg;
        this.d = y.dy;
        this.type = y.type;
        this.sc = null == y.sc ? 1 : y.sc;
        this.number1 = null == y.number1 ? 1 : y.number1;
        this.number2 = null == y.number2 ? 1 : y.number2;
        this.gonli = null == y.gonli ? f : y.gonli;
        this.nongli = null == y.nongli ? p : y.nongli;
        this.sizhu = null == y.sizhu ? m : y.sizhu;
        this.sizhuArray = w;

        o = "子丑寅卯辰巳午未申酉戌亥"[this.sc - 1] + "时";
        if (1 == this.type) var b = "时间起卦"; else if (2 == this.type) b = "随机起卦"; else if (3 == this.type) b = "报数起卦(" + this.number1 + "," + this.number2 + ")"; else if (4 == this.type) b = "指定起卦"; else if (5 == this.type) b = "报数起卦(" + this.number1 + "," + this.number2 + " 加" + o + ")";
        uni.setNavigationBarTitle({
            title: b
        });
        var D = e.getMap(), S = e.getMap64(), _ = [ [ 1, 1, 1 ], [ 0, 1, 1 ], [ 1, 0, 1 ], [ 0, 0, 1 ], [ 1, 1, 0 ], [ 0, 1, 0 ], [ 1, 0, 0 ], [ 0, 0, 0 ] ], v = e.getZhuGua(_, this.s, this.x).split("-"), z = e.getHuGua(_, this.s, this.x).split("-"), q = e.getBianGua(_, this.s, this.x, this.d).split("-"), M = D.get(v[0]) + D.get(v[1]), j = D.get(z[0]) + D.get(z[1]), I = D.get(q[0]) + D.get(q[1]);

        this.zhugua_img = M + this.d;
        this.zhugua_img_data = M;
        this.hugua_img = j;
        this.biangua_img = I;
        this.zhugua_text = S.get(M);
        this.hugua_text = S.get(j);
        this.biangua_text = S.get(I);
    },
  }
}
</script>

<style scoped>
.content {
	height: 100%;
	width: 100%;
	overflow-y: scroll;
	position: relative
}
.tips-box {
	height: 400rpx;
	background-color: #c6a680;
	width: 100%;
}
.tips-content {
	width: 100%;
	height: 31rpx;
	text-align: center;
	font-size: 32rpx;
	font-weight: bold;
	font-stretch: normal;
	line-height: 34rpx;
	letter-spacing: 0rpx;
	color: #32312e;
	margin: 94rpx auto 53rpx;
}
.info-box {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-top: -230rpx;
}
.info-block {
	background-color: #fff;
	width: 640rpx;
	height: fit-content;
	border-radius: 0rpx;
	box-shadow: 0 0 20rpx #666;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 48rpx;
}
.time-info {
	display: flex;
	padding: 24rpx 36rpx;
	flex-direction: column;
	border-radius: 6rpx;
}
.section {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	color: #000;
	margin-bottom: 24rpx;
}
.section-title {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	font-size: 32rpx;
	color: #32312e;
}
.section-content {
	color: #808080;
	width: 422rpx;
	box-sizing: border-box;
	font-size: 32rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.info {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.userinfo-avatar {
	width: 178rpx;
	height: 178rpx;
}

.info-1 {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
}

.nickname-btn-zhugua {
	color: #c5a680;
	font-size: 28rpx;
	line-height: 34rpx;
}

.nickname-btn-zhugua::after {
	border: none;
}

.nickname-btn {
	color: #c5a680;
	font-size: 28rpx;
	line-height: 34rpx;
}

.nickname-btn::after {
	border: none;
}

.nickname-btn-top-zhugua {
	color: #c5a680;
	font-size: 28rpx;
	line-height: 28rpx;
}

.nickname-btn-top-zhugua::after {
	border: none;
}

.nickname-btn-top {
	color: #c5a680;
	font-size: 28rpx;
	line-height: 28rpx;
}

.nickname-btn-top::after {
	border: none;
}

.index-bd {
	box-sizing: border-box;
	width: 100%;
	margin-top: 35rpx;
}
.kind-list {
	padding: 0 62rpx;
}
.kind-list-item {
	width: 100%;
	box-sizing: border-box;
	margin: 20rpx 0;
	border-radius: 32rpx;
	border: solid 3rpx #c5a680;
}

.kind-list-item:first-child {
	margin-top: 0;
}

.kind-list-text {
	color: #c5a680;
	font-size: 32rpx;
}

.kind-list-img {
	height: 48rpx;
}

.kind-list-item-hd {
	box-sizing: border-box;
	width: 100%;
	height: 66rpx;
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: space-between;
	padding: 4rpx 24rpx 4rpx 48rpx;
}

.mod-text {
	writing-mode: vertical-lr;
	line-height: 70rpx;
}

.mod-text text {
	display: block;
}
.logo-box {
	display: flex;
	justify-content: center;
	align-items: center;
}
.logo-img {
	padding: 38rpx 0;
	width: 100rpx;
	height: 100rpx;
}
</style>